<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轻量化无人集群综合管控仿真平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        success: '#00B42A',
                        dark: '#1D2129',
                        'dark-2': '#4E5969',
                        'light-1': '#F2F3F5',
                        'light-2': '#E5E6EB',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
                        'hover': '0 8px 30px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .animate-pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .animate-float {
                animation: float 3s ease-in-out infinite;
            }
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
                100% { transform: translateY(0px); }
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="main-header">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center space-x-2">
                    <div class="text-primary text-2xl">
                        <i class="fa fa-drone"></i>
                    </div>
                    <span class="font-bold text-xl text-dark">无人集群管控平台</span>
                </div>
                
                <nav class="hidden md:flex space-x-8">
                    <a href="#dashboard" class="text-primary font-medium">概览</a>
                    <a href="#swarm-control" class="text-dark-2 hover:text-primary transition-colors">集群控制</a>
                    <a href="#simulation" class="text-dark-2 hover:text-primary transition-colors">仿真测试</a>
                    <a href="#analytics" class="text-dark-2 hover:text-primary transition-colors">数据分析</a>
                    <a href="#settings" class="text-dark-2 hover:text-primary transition-colors">系统设置</a>
                </nav>
                
                <div class="flex items-center space-x-4">
                    <button class="p-2 text-dark-2 hover:text-primary transition-colors">
                        <i class="fa fa-bell"></i>
                    </button>
                    <button class="p-2 text-dark-2 hover:text-primary transition-colors">
                        <i class="fa fa-cog"></i>
                    </button>
                    <div class="h-8 w-8 rounded-full bg-primary text-white flex items-center justify-center">
                        <span class="text-sm font-medium">AD</span>
                    </div>
                    <button class="md:hidden p-2 text-dark-2 hover:text-primary transition-colors" id="mobile-menu-button">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden bg-white border-t" id="mobile-menu">
            <div class="container mx-auto px-4 py-3 space-y-3">
                <a href="#dashboard" class="block py-2 text-primary font-medium">概览</a>
                <a href="#swarm-control" class="block py-2 text-dark-2 hover:text-primary transition-colors">集群控制</a>
                <a href="#simulation" class="block py-2 text-dark-2 hover:text-primary transition-colors">仿真测试</a>
                <a href="#analytics" class="block py-2 text-dark-2 hover:text-primary transition-colors">数据分析</a>
                <a href="#settings" class="block py-2 text-dark-2 hover:text-primary transition-colors">系统设置</a>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="flex-grow">
        <!-- 概览面板 -->
        <section id="dashboard" class="py-8 bg-light-1">
            <div class="container mx-auto px-4">
                <div class="mb-8">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2">系统概览</h2>
                    <p class="text-dark-2">实时监控无人集群状态和任务执行情况</p>
                </div>
                
                <!-- 状态卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <div class="bg-white rounded-xl shadow-card p-6 transform hover:shadow-hover transition-all duration-300 hover:-translate-y-1">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-dark-2 text-sm mb-1">在线无人机</p>
                                <h3 class="text-3xl font-bold text-dark mb-2">24</h3>
                                <p class="text-success text-sm flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 5 架 (25%)
                                </p>
                            </div>
                            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                                <i class="fa fa-drone text-xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-card p-6 transform hover:shadow-hover transition-all duration-300 hover:-translate-y-1">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-dark-2 text-sm mb-1">活跃任务</p>
                                <h3 class="text-3xl font-bold text-dark mb-2">7</h3>
                                <p class="text-success text-sm flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 2 个 (40%)
                                </p>
                            </div>
                            <div class="h-12 w-12 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
                                <i class="fa fa-tasks text-xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-card p-6 transform hover:shadow-hover transition-all duration-300 hover:-translate-y-1">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-dark-2 text-sm mb-1">数据传输</p>
                                <h3 class="text-3xl font-bold text-dark mb-2">4.2 MB/s</h3>
                                <p class="text-danger text-sm flex items-center">
                                    <i class="fa fa-arrow-down mr-1"></i> 0.5 MB/s (10%)
                                </p>
                            </div>
                            <div class="h-12 w-12 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
                                <i class="fa fa-exchange text-xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-card p-6 transform hover:shadow-hover transition-all duration-300 hover:-translate-y-1">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-dark-2 text-sm mb-1">电池状态</p>
                                <h3 class="text-3xl font-bold text-dark mb-2">82%</h3>
                                <p class="text-success text-sm flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 3%
                                </p>
                            </div>
                            <div class="h-12 w-12 rounded-lg bg-success/10 flex items-center justify-center text-success">
                                <i class="fa fa-battery-three-quarters text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 地图和状态图表 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                    <div class="bg-white rounded-xl shadow-card p-6 lg:col-span-2">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="font-semibold text-lg text-dark">无人机分布地图</h3>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                    2D视图
                                </button>
                                <button class="px-3 py-1 text-sm bg-light-1 text-dark-2 rounded-lg hover:bg-light-2 transition-colors">
                                    3D视图
                                </button>
                            </div>
                        </div>
                        <div class="relative h-[400px] bg-light-1 rounded-lg overflow-hidden" id="map-container">
                            <!-- 地图将在这里渲染 -->
                            <div class="absolute inset-0 flex items-center justify-center">
                                <div class="text-center">
                                    <div class="text-4xl text-primary mb-2 animate-pulse-slow">
                                        <i class="fa fa-map-o"></i>
                                    </div>
                                    <p class="text-dark-2">加载地图中...</p>
                                </div>
                            </div>
                            
                            <!-- 模拟的无人机标记点 -->
                            <div class="absolute top-[30%] left-[25%] w-4 h-4 bg-primary rounded-full animate-pulse"></div>
                            <div class="absolute top-[45%] left-[60%] w-4 h-4 bg-primary rounded-full animate-pulse"></div>
                            <div class="absolute top-[60%] left-[40%] w-4 h-4 bg-primary rounded-full animate-pulse"></div>
                            <div class="absolute top-[20%] left-[70%] w-4 h-4 bg-primary rounded-full animate-pulse"></div>
                            <div class="absolute top-[70%] left-[20%] w-4 h-4 bg-primary rounded-full animate-pulse"></div>
                            <div class="absolute top-[50%] left-[80%] w-4 h-4 bg-warning rounded-full animate-pulse"></div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-card p-6">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="font-semibold text-lg text-dark">集群状态分析</h3>
                            <button class="text-primary hover:text-primary/80 transition-colors">
                                <i class="fa fa-refresh"></i>
                            </button>
                        </div>
                        <div class="h-[400px]">
                            <canvas id="status-chart"></canvas>
                        </div>
                    </div>
                </div>
                
                <!-- 无人机列表 -->
                <div class="bg-white rounded-xl shadow-card p-6 mb-8">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="font-semibold text-lg text-dark">无人机状态列表</h3>
                        <div class="flex items-center space-x-4">
                            <div class="relative">
                                <input type="text" placeholder="搜索无人机..." class="pl-9 pr-4 py-2 bg-light-1 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all w-full md:w-64">
                                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-dark-2"></i>
                            </div>
                            <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center">
                                <i class="fa fa-plus mr-2"></i> 添加无人机
                            </button>
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="min-w-full">
                            <thead>
                                <tr class="border-b border-light-2">
                                    <th class="py-3 px-4 text-left text-sm font-medium text-dark-2">ID</th>
                                    <th class="py-3 px-4 text-left text-sm font-medium text-dark-2">型号</th>
                                    <th class="py-3 px-4 text-left text-sm font-medium text-dark-2">状态</th>
                                    <th class="py-3 px-4 text-left text-sm font-medium text-dark-2">位置</th>
                                    <th class="py-3 px-4 text-left text-sm font-medium text-dark-2">电池</th>
                                    <th class="py-3 px-4 text-left text-sm font-medium text-dark-2">任务</th>
                                    <th class="py-3 px-4 text-left text-sm font-medium text-dark-2">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b border-light-2 hover:bg-light-1/50 transition-colors">
                                    <td class="py-3 px-4 text-sm font-medium text-dark">UAV-001</td>
                                    <td class="py-3 px-4 text-sm text-dark-2">幻影2000</td>
                                    <td class="py-3 px-4">
                                        <span class="px-2 py-1 text-xs rounded-full bg-success/10 text-success">执行中</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-dark-2">北纬39.9°, 东经116.4°</td>
                                    <td class="py-3 px-4">
                                        <div class="w-24 bg-light-2 rounded-full h-2">
                                            <div class="bg-success h-2 rounded-full" style="width: 75%"></div>
                                        </div>
                                        <span class="text-xs text-dark-2 ml-2">75%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-dark-2">巡逻任务#001</td>
                                    <td class="py-3 px-4">
                                        <div class="flex space-x-2">
                                            <button class="text-primary hover:text-primary/80 transition-colors">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <button class="text-dark-2 hover:text-dark transition-colors">
                                                <i class="fa fa-cog"></i>
                                            </button>
                                            <button class="text-danger hover:text-danger/80 transition-colors">
                                                <i class="fa fa-stop-circle"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="border-b border-light-2 hover:bg-light-1/50 transition-colors">
                                    <td class="py-3 px-4 text-sm font-medium text-dark">UAV-002</td>
                                    <td class="py-3 px-4 text-sm text-dark-2">捕食者-X</td>
                                    <td class="py-3 px-4">
                                        <span class="px-2 py-1 text-xs rounded-full bg-warning/10 text-warning">待机中</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-dark-2">北纬39.8°, 东经116.5°</td>
                                    <td class="py-3 px-4">
                                        <div class="w-24 bg-light-2 rounded-full h-2">
                                            <div class="bg-warning h-2 rounded-full" style="width: 45%"></div>
                                        </div>
                                        <span class="text-xs text-dark-2 ml-2">45%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-dark-2">待命</td>
                                    <td class="py-3 px-4">
                                        <div class="flex space-x-2">
                                            <button class="text-primary hover:text-primary/80 transition-colors">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <button class="text-dark-2 hover:text-dark transition-colors">
                                                <i class="fa fa-cog"></i>
                                            </button>
                                            <button class="text-danger hover:text-danger/80 transition-colors">
                                                <i class="fa fa-stop-circle"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="border-b border-light-2 hover:bg-light-1/50 transition-colors">
                                    <td class="py-3 px-4 text-sm font-medium text-dark">UAV-003</td>
                                    <td class="py-3 px-4 text-sm text-dark-2">猎鹰-9</td>
                                    <td class="py-3 px-4">
                                        <span class="px-2 py-1 text-xs rounded-full bg-success/10 text-success">执行中</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-dark-2">北纬40.1°, 东经116.3°</td>
                                    <td class="py-3 px-4">
                                        <div class="w-24 bg-light-2 rounded-full h-2">
                                            <div class="bg-success h-2 rounded-full" style="width: 85%"></div>
                                        </div>
                                        <span class="text-xs text-dark-2 ml-2">85%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-dark-2">侦查任务#005</td>
                                    <td class="py-3 px-4">
                                        <div class="flex space-x-2">
                                            <button class="text-primary hover:text-primary/80 transition-colors">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <button class="text-dark-2 hover:text-dark transition-colors">
                                                <i class="fa fa-cog"></i>
                                            </button>
                                            <button class="text-danger hover:text-danger/80 transition-colors">
                                                <i class="fa fa-stop-circle"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="border-b border-light-2 hover:bg-light-1/50 transition-colors">
                                    <td class="py-3 px-4 text-sm font-medium text-dark">UAV-004</td>
                                    <td class="py-3 px-4 text-sm text-dark-2">幻影2000</td>
                                    <td class="py-3 px-4">
                                        <span class="px-2 py-1 text-xs rounded-full bg-danger/10 text-danger">警告</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-dark-2">北纬39.7°, 东经116.6°</td>
                                    <td class="py-3 px-4">
                                        <div class="w-24 bg-light-2 rounded-full h-2">
                                            <div class="bg-danger h-2 rounded-full" style="width: 15%"></div>
                                        </div>
                                        <span class="text-xs text-dark-2 ml-2">15%</span>
                                    </td>
                                    <td class="py-3 px-4 text-sm text-dark-2">返回基地</td>
                                    <td class="py-3 px-4">
                                        <div class="flex space-x-2">
                                            <button class="text-primary hover:text-primary/80 transition-colors">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <button class="text-dark-2 hover:text-dark transition-colors">
                                                <i class="fa fa-cog"></i>
                                            </button>
                                            <button class="text-danger hover:text-danger/80 transition-colors">
                                                <i class="fa fa-stop-circle"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="flex items-center justify-between mt-6">
                        <p class="text-sm text-dark-2">显示 1-4 条，共 24 条</p>
                        <div class="flex space-x-1">
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-light-1 text-dark-2 hover:bg-light-2 transition-colors">
                                <i class="fa fa-angle-left"></i>
                            </button>
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-primary text-white">1</button>
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-light-1 text-dark-2 hover:bg-light-2 transition-colors">2</button>
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-light-1 text-dark-2 hover:bg-light-2 transition-colors">3</button>
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-light-1 text-dark-2 hover:bg-light-2 transition-colors">
                                <i class="fa fa-angle-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 集群控制 -->
        <section id="swarm-control" class="py-8 bg-white">
            <div class="container mx-auto px-4">
                <div class="mb-8">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2">集群控制</h2>
                    <p class="text-dark-2">实时控制和管理无人集群</p>
                </div>
                
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                    <div class="bg-white rounded-xl shadow-card p-6">
                        <h3 class="font-semibold text-lg text-dark mb-6">任务管理</h3>
                        
                        <div class="space-y-4">
                            <div class="p-4 border border-light-2 rounded-lg hover:border-primary transition-colors cursor-pointer">
                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="font-medium text-dark">区域巡逻任务#001</h4>
                                    <span class="px-2 py-1 text-xs rounded-full bg-success/10 text-success">进行中</span>
                                </div>
                                <p class="text-sm text-dark-2 mb-3">对工业园区进行24小时监控巡逻</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-dark-2">无人机: 8架</span>
                                    <span class="text-xs text-dark-2">进度: 65%</span>
                                </div>
                            </div>
                            
                            <div class="p-4 border border-light-2 rounded-lg hover:border-primary transition-colors cursor-pointer">
                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="font-medium text-dark">侦查任务#005</h4>
                                    <span class="px-2 py-1 text-xs rounded-full bg-success/10 text-success">进行中</span>
                                </div>
                                <p class="text-sm text-dark-2 mb-3">对指定区域进行详细侦查</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-dark-2">无人机: 3架</span>
                                    <span class="text-xs text-dark-2">进度: 40%</span>
                                </div>
                            </div>
                            
                            <div class="p-4 border border-light-2 rounded-lg hover:border-primary transition-colors cursor-pointer">
                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="font-medium text-dark">物流配送任务#012</h4>
                                    <span class="px-2 py-1 text-xs rounded-full bg-warning/10 text-warning">准备中</span>
                                </div>
                                <p class="text-sm text-dark-2 mb-3">向指定地点配送物资</p>
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-dark-2">无人机: 5架</span>
                                    <span class="text-xs text-dark-2">进度: 0%</span>
                                </div>
                            </div>
                        </div>
                        
                        <button class="w-full mt-6 py-2 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors">
                            创建新任务
                        </button>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-card p-6">
                        <h3 class="font-semibold text-lg text-dark mb-6">集群配置</h3>
                        
                        <form class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-dark-2 mb-1">编队模式</label>
                                <select class="w-full p-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                                    <option>楔形编队</option>
                                    <option>矩阵编队</option>
                                    <option>圆形编队</option>
                                    <option>自由编队</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-dark-2 mb-1">飞行高度</label>
                                <input type="range" min="50" max="500" value="150" class="w-full accent-primary" id="altitude-slider">
                                <div class="flex justify-between text-xs text-dark-2 mt-1">
                                    <span>50米</span>
                                    <span id="altitude-value">150米</span>
                                    <span>500米</span>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-dark-2 mb-1">巡航速度</label>
                                <input type="range" min="10" max="100" value="40" class="w-full accent-primary" id="speed-slider">
                                <div class="flex justify-between text-xs text-dark-2 mt-1">
                                    <span>10 km/h</span>
                                    <span id="speed-value">40 km/h</span>
                                    <span>100 km/h</span>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-dark-2 mb-1">通信频率</label>
                                <select class="w-full p-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                                    <option>2.4 GHz</option>
                                    <option>5.8 GHz</option>
                                    <option>900 MHz</option>
                                    <option>自定义</option>
                                </select>
                            </div>
                            
                            <div class="pt-2">
                                <button class="w-full py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                    应用配置
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-card p-6">
                        <h3 class="font-semibold text-lg text-dark mb-6">实时控制</h3>
                        
                        <div class="bg-light-1 rounded-lg p-4 mb-6">
                            <div class="flex justify-center mb-6">
                                <div class="relative w-40 h-40">
                                    <!-- 虚拟摇杆背景 -->
                                    <div class="absolute inset-0 rounded-full bg-light-2 flex items-center justify-center">
                                        <div class="w-12 h-12 rounded-full bg-primary cursor-pointer shadow-lg" id="joystick"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-2 gap-3">
                                <button class="py-2 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors">
                                    上升
                                </button>
                                <button class="py-2 border border-danger text-danger rounded-lg hover:bg-danger hover:text-white transition-colors">
                                    降落
                                </button>
                                <button class="py-2 border border-warning text-warning rounded-lg hover:bg-warning hover:text-white transition-colors">
                                    悬停
                                </button>
                                <button class="py-2 border border-success text-success rounded-lg hover:bg-success hover:text-white transition-colors">
                                    开始任务
                                </button>
                            </div>
                        </div>
                        
                        <div class="space-y-3">
                            <button class="w-full py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center">
                                <i class="fa fa-play mr-2"></i> 启动集群
                            </button>
                            <button class="w-full py-2 bg-warning text-white rounded-lg hover:bg-warning/90 transition-colors flex items-center justify-center">
                                <i class="fa fa-pause mr-2"></i> 暂停任务
                            </button>
                            <button class="w-full py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors flex items-center justify-center">
                                <i class="fa fa-stop mr-2"></i> 紧急停止
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 仿真测试 -->
        <section id="simulation" class="py-8 bg-light-1">
            <div class="container mx-auto px-4">
                <div class="mb-8">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2">仿真测试</h2>
                    <p class="text-dark-2">在部署前进行各种场景的仿真测试</p>
                </div>
                
                <div class="bg-white rounded-xl shadow-card p-6 mb-8">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
                        <h3 class="font-semibold text-lg text-dark mb-4 md:mb-0">仿真场景</h3>
                        <div class="flex flex-wrap gap-2">
                            <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                开始仿真
                            </button>
                            <button class="px-4 py-2 bg-light-1 text-dark-2 rounded-lg hover:bg-light-2 transition-colors">
                                保存场景
                            </button>
                            <button class="px-4 py-2 bg-light-1 text-dark-2 rounded-lg hover:bg-light-2 transition-colors">
                                加载场景
                            </button>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                        <div class="border border-light-2 rounded-lg overflow-hidden hover:shadow-card transition-all duration-300 cursor-pointer">
                            <div class="h-40 bg-light-2 relative">
                                <img src="https://picsum.photos/seed/swarm1/400/300" alt="城市环境仿真" class="w-full h-full object-cover">
                                <div class="absolute top-2 right-2 bg-primary/90 text-white text-xs px-2 py-1 rounded">
                                    热门
                                </div>
                            </div>
                            <div class="p-4">
                                <h4 class="font-medium text-dark mb-1">城市环境</h4>
                                <p class="text-sm text-dark-2 mb-3">模拟城市建筑物密集环境中的集群飞行</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-dark-2">难度: 中等</span>
                                    <button class="text-primary hover:text-primary/80 transition-colors">
                                        选择
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="border border-light-2 rounded-lg overflow-hidden hover:shadow-card transition-all duration-300 cursor-pointer">
                            <div class="h-40 bg-light-2 relative">
                                <img src="https://picsum.photos/seed/swarm2/400/300" alt="山区环境仿真" class="w-full h-full object-cover">
                            </div>
                            <div class="p-4">
                                <h4 class="font-medium text-dark mb-1">山区环境</h4>
                                <p class="text-sm text-dark-2 mb-3">模拟复杂地形和气象条件下的集群飞行</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-dark-2">难度: 高</span>
                                    <button class="text-primary hover:text-primary/80 transition-colors">
                                        选择
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="border border-light-2 rounded-lg overflow-hidden hover:shadow-card transition-all duration-300 cursor-pointer">
                            <div class="h-40 bg-light-2 relative">
                                <img src="https://picsum.photos/seed/swarm3/400/300" alt="海洋环境仿真" class="w-full h-full object-cover">
                            </div>
                            <div class="p-4">
                                <h4 class="font-medium text-dark mb-1">海洋环境</h4>
                                <p class="text-sm text-dark-2 mb-3">模拟海上巡逻和搜索救援任务</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-dark-2">难度: 高</span>
                                    <button class="text-primary hover:text-primary/80 transition-colors">
                                        选择
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="border border-light-2 rounded-lg overflow-hidden hover:shadow-card transition-all duration-300 cursor-pointer">
                            <div class="h-40 bg-light-2 relative flex items-center justify-center">
                                <div class="text-center">
                                    <div class="text-4xl text-primary mb-2">
                                        <i class="fa fa-plus-circle"></i>
                                    </div>
                                    <p class="text-dark-2">创建自定义场景</p>
                                </div>
                            </div>
                            <div class="p-4">
                                <h4 class="font-medium text-dark mb-1">自定义场景</h4>
                                <p class="text-sm text-dark-2 mb-3">根据实际需求创建专属仿真场景</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-dark-2">难度: 自定义</span>
                                    <button class="text-primary hover:text-primary/80 transition-colors">
                                        创建
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                    <div class="bg-white rounded-xl shadow-card p-6 lg:col-span-2">
                        <h3 class="font-semibold text-lg text-dark mb-6">仿真控制面板</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label class="block text-sm font-medium text-dark-2 mb-1">仿真时间</label>
                                <div class="flex items-center space-x-3">
                                    <input type="time" class="p-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                                    <span class="text-dark-2">至</span>
                                    <input type="time" class="p-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-dark-2 mb-1">仿真速度</label>
                                <select class="w-full p-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                                    <option>0.5x (慢速)</option>
                                    <option selected>1x (正常)</option>
                                    <option>2x (快速)</option>
                                    <option>5x (超快速)</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-dark-2 mb-1">无人机数量</label>
                                <input type="range" min="1" max="50" value="10" class="w-full accent-primary" id="uav-count-slider">
                                <div class="flex justify-between text-xs text-dark-2 mt-1">
                                    <span>1架</span>
                                    <span id="uav-count-value">10架</span>
                                    <span>50架</span>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-dark-2 mb-1">干扰强度</label>
                                <select class="w-full p-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                                    <option>无干扰</option>
                                    <option>低干扰</option>
                                    <option selected>中等干扰</option>
                                    <option>高干扰</option>
                                    <option>严重干扰</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="bg-light-1 rounded-lg p-4 h-[300px] overflow-y-auto scrollbar-hide" id="simulation-log">
                            <p class="text-sm text-dark-2 mb-2">仿真日志:</p>
                            <div class="space-y-2 text-sm">
                                <p><span class="text-primary">10:00:00</span> - 仿真开始</p>
                                <p><span class="text-success">10:00:15</span> - 所有无人机成功起飞</p>
                                <p><span class="text-warning">10:01:30</span> - UAV-003 信号受到干扰</p>
                                <p><span class="text-primary">10:01:45</span> - UAV-003 切换到备用通信频率</p>
                                <p><span class="text-success">10:02:00</span> - 编队进入预定区域</p>
                                <p><span class="text-primary">10:03:10</span> - 开始执行巡逻任务</p>
                                <p><span class="text-warning">10:05:40</span> - UAV-007 电池电量低</p>
                                <p><span class="text-primary">10:05:50</span> - UAV-007 收到返回基地指令</p>
                                <p><span class="text-success">10:07:30</span> - UAV-007 安全降落</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-card p-6">
                        <h3 class="font-semibold text-lg text-dark mb-6">仿真结果分析</h3>
                        
                        <div class="h-[400px]">
                            <canvas id="simulation-chart"></canvas>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-4 mt-6">
                            <div class="bg-light-1 rounded-lg p-3">
                                <p class="text-xs text-dark-2 mb-1">任务完成率</p>
                                <p class="text-2xl font-bold text-dark">92%</p>
                            </div>
                            <div class="bg-light-1 rounded-lg p-3">
                                <p class="text-xs text-dark-2 mb-1">通信成功率</p>
                                <p class="text-2xl font-bold text-dark">87%</p>
                            </div>
                            <div class="bg-light-1 rounded-lg p-3">
                                <p class="text-xs text-dark-2 mb-1">能源效率</p>
                                <p class="text-2xl font-bold text-dark">76%</p>
                            </div>
                            <div class="bg-light-1 rounded-lg p-3">
                                <p class="text-xs text-dark-2 mb-1">碰撞规避率</p>
                                <p class="text-2xl font-bold text-dark">100%</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 数据分析 -->
        <section id="analytics" class="py-8 bg-white">
            <div class="container mx-auto px-4">
                <div class="mb-8">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2">数据分析</h2>
                    <p class="text-dark-2">深入分析无人集群运行数据</p>
                </div>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                    <div class="bg-white rounded-xl shadow-card p-6">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="font-semibold text-lg text-dark">历史任务分析</h3>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                    周
                                </button>
                                <button class="px-3 py-1 text-sm bg-light-1 text-dark-2 rounded-lg hover:bg-light-2 transition-colors">
                                    月
                                </button>
                                <button class="px-3 py-1 text-sm bg-light-1 text-dark-2 rounded-lg hover:bg-light-2 transition-colors">
                                    年
                                </button>
                            </div>
                        </div>
                        <div class="h-[400px]">
                            <canvas id="tasks-chart"></canvas>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-card p-6">
                        <div class="flex items-center justify-between mb-6">
                            <h3 class="font-semibold text-lg text-dark">无人机性能分析</h3>
                            <div class="flex space-x-2">
                                <select class="p-1 text-sm border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                                    <option>所有型号</option>
                                    <option>幻影2000</option>
                                    <option>捕食者-X</option>
                                    <option>猎鹰-9</option>
                                </select>
                            </div>
                        </div>
                        <div class="h-[400px]">
                            <canvas id="performance-chart"></canvas>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-card p-6 mb-8">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="font-semibold text-lg text-dark">通信质量分析</h3>
                        <div class="flex items-center space-x-4">
                            <div class="relative">
                                <input type="date" class="p-2 border border-light-2 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                            </div>
                            <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                导出数据
                            </button>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                        <div class="bg-light-1 rounded-lg p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="font-medium text-dark">平均信号强度</h4>
                                <span class="text-success text-sm">+2.4 dBm</span>
                            </div>
                            <div class="flex items-end space-x-1 h-20">
                                <div class="w-6 bg-primary rounded-t-lg" style="height: 60%"></div>
                                <div class="w-6 bg-primary rounded-t-lg" style="height: 75%"></div>
                                <div class="w-6 bg-primary rounded-t-lg" style="height: 80%"></div>
                                <div class="w-6 bg-primary rounded-t-lg" style="height: 65%"></div>
                                <div class="w-6 bg-primary rounded-t-lg" style="height: 90%"></div>
                                <div class="w-6 bg-primary rounded-t-lg" style="height: 70%"></div>
                                <div class="w-6 bg-primary rounded-t-lg" style="height: 85%"></div>
                                <div class="w-6 bg-primary rounded-t-lg" style="height: 78%"></div>
                                <div class="w-6 bg-primary rounded-t-lg" style="height: 82%"></div>
                                <div class="w-6 bg-primary rounded-t-lg" style="height: 75%"></div>
                            </div>
                            <p class="text-xs text-dark-2 mt-2">平均: -78.6 dBm</p>
                        </div>
                        
                        <div class="bg-light-1 rounded-lg p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="font-medium text-dark">数据包丢失率</h4>
                                <span class="text-danger text-sm">+1.2%</span>
                            </div>
                            <div class="flex items-end space-x-1 h-20">
                                <div class="w-6 bg-danger rounded-t-lg" style="height: 8%"></div>
                                <div class="w-6 bg-danger rounded-t-lg" style="height: 12%"></div>
                                <div class="w-6 bg-danger rounded-t-lg" style="height: 10%"></div>
                                <div class="w-6 bg-danger rounded-t-lg" style="height: 15%"></div>
                                <div class="w-6 bg-danger rounded-t-lg" style="height: 9%"></div>
                                <div class="w-6 bg-danger rounded-t-lg" style="height: 11%"></div>
                                <div class="w-6 bg-danger rounded-t-lg" style="height: 14%"></div>
                                <div class="w-6 bg-danger rounded-t-lg" style="height: 12%"></div>
                                <div class="w-6 bg-danger rounded-t-lg" style="height: 13%"></div>
                                <div class="w-6 bg-danger rounded-t-lg" style="height: 16%"></div>
                            </div>
                            <p class="text-xs text-dark-2 mt-2">平均: 12.3%</p>
                        </div>
                        
                        <div class="bg-light-1 rounded-lg p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="font-medium text-dark">延迟分析</h4>
                                <span class="text-success text-sm">-3.5 ms</span>
                            </div>
                            <div class="flex items-end space-x-1 h-20">
                                <div class="w-6 bg-warning rounded-t-lg" style="height: 45%"></div>
                                <div class="w-6 bg-warning rounded-t-lg" style="height: 55%"></div>
                                <div class="w-6 bg-warning rounded-t-lg" style="height: 40%"></div>
                                <div class="w-6 bg-warning rounded-t-lg" style="height: 60%"></div>
                                <div class="w-6 bg-warning rounded-t-lg" style="height: 35%"></div>
                                <div class="w-6 bg-warning rounded-t-lg" style="height: 50%"></div>
                                <div class="w-6 bg-warning rounded-t-lg" style="height: 48%"></div>
                                <div class="w-6 bg-warning rounded-t-lg" style="height: 52%"></div>
                                <div class="w-6 bg-warning rounded-t-lg" style="height: 42%"></div>
                                <div class="w-6 bg-warning rounded-t-lg" style="height: 46%"></div>
                            </div>
                            <p class="text-xs text-dark-2 mt-2">平均: 48.5 ms</p>
                        </div>
                    </div>
                    
                    <div class="h-[300px]">
                        <canvas id="communication-chart"></canvas>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 系统设置 -->
        <section id="settings" class="py-8 bg-light-1">
            <div class="container mx-auto px-4">
                <div class="mb-8">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2">系统设置</h2>
                    <p class="text-dark-2">配置和管理系统参数</p>
                </div>
                
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                    <div class="bg-white rounded-xl shadow-card p-6">
                        <h3 class="font-semibold text-lg text-dark mb-6">用户管理</h3>
                        
                        <div class="space-y-4">
                            <div class="flex items-center justify-between p-3 border border-light-2 rounded-lg hover:bg-light-1/50 transition-colors">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                                        <span class="text-sm font-medium">AD</span>
                                    </div>
                                    <div>
                                        <h4 class="font-medium text-dark">管理员</h4>
                                        <p class="text-xs text-dark-2">admin@example.com</p>
                                    </div>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-primary hover:text-primary/80 transition-colors">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button class="text-dark-2 hover:text-dark transition-colors">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between p-3 border border-light-2 rounded-lg hover:bg-light-1/50 transition-colors">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-secondary/10 flex items-center justify-center text-secondary mr-3">
                                        <span class="text-sm font-medium">OP</span>
                                    </div>
                                    <div>
                                        <h4 class="font-medium text-dark">操作员</h4>
                                        <p class="text-xs text-dark-2">operator@example.com</p>
                                    </div>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-primary hover:text-primary/80 transition-colors">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button class="text-dark-2 hover:text-dark transition-colors">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between p-3 border border-light-2 rounded-lg hover:bg-light-1/50 transition-colors">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-warning/10 flex items-center justify-center text-warning mr-3">
                                        <span class="text-sm font-medium">AN</span>
                                    </div>
                                    <div>
                                        <h4 class="font-medium text-dark">分析师</h4>
                                        <p class="text-xs text-dark-2">analyst@example.com</p>
                                    </div>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-primary hover:text-primary/80 transition-colors">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button class="text-dark-2 hover:text-dark transition-colors">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <button class="w-full mt-6 py-2 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors">
                            添加用户
                        </button>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-card p-6">
                        <h3 class="font-semibold text-lg text-dark mb-6">系统参数</h3>
                        
                        <form class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-dark-2 mb-1">系统名称</label>
                                <input type="text" value="轻量化无人集群综合管控平台" class="w-full p-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-dark-2 mb-1">通信协议</label>
                                <select class="w-full p-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                                    <option>MQTT</option>
                                    <option selected>CoAP</option>
                                    <option>DDS</option>
                                    <option>自定义</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-dark-2 mb-1">数据存储路径</label>
                                <input type="text" value="/data/uav_swarm" class="w-full p-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-dark-2 mb-1">日志级别</label>
                                <select class="w-full p-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all">
                                    <option>调试</option>
                                    <option selected>信息</option>
                                    <option>警告</option>
                                    <option>错误</option>
                                    <option>严重</option>
                                </select>
                            </div>
                            
                            <div class="pt-2">
                                <button class="w-full py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                                    保存设置
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-card p-6">
                        <h3 class="font-semibold text-lg text-dark mb-6">更新与维护</h3>
                        
                        <div class="p-4 bg-light-1 rounded-lg mb-6">
                            <div class="flex items-start justify-between mb-3">
                                <div>
                                    <h4 class="font-medium text-dark">当前版本: v1.2.5</h4>
                                    <p class="text-sm text-dark-2">上次更新: 2025-06-15</p>
                                </div>
                                <div class="px-2 py-1 text-xs rounded-full bg-success/10 text-success">
                                    最新版本
                                </div>
                            </div>
                            <button class="w-full py-2 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors">
                                检查更新
                            </button>
                        </div>
                        
                        <div class="space-y-3">
                            <button class="w-full py-2 bg-warning text-white rounded-lg hover:bg-warning/90 transition-colors flex items-center justify-center">
                                <i class="fa fa-database mr-2"></i> 备份数据
                            </button>
                            <button class="w-full py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors flex items-center justify-center">
                                <i class="fa fa-refresh mr-2"></i> 恢复默认设置
                            </button>
                            <button class="w-full py-2 bg-dark text-white rounded-lg hover:bg-dark/90 transition-colors flex items-center justify-center">
                                <i class="fa fa-cog mr-2"></i> 系统配置
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="text-white text-2xl">
                            <i class="fa fa-drone"></i>
                        </div>
                        <span class="font-bold text-xl">无人集群管控平台</span>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">
                        轻量化无人集群综合管控仿真平台，为您提供高效、可靠的无人机集群管理解决方案。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-linkedin"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="font-semibold text-lg mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#dashboard" class="hover:text-white transition-colors">概览</a></li>
                        <li><a href="#swarm-control" class="hover:text-white transition-colors">集群控制</a></li>
                        <li><a href="#simulation" class="hover:text-white transition-colors">仿真测试</a></li>
                        <li><a href="#analytics" class="hover:text-white transition-colors">数据分析</a></li>
                        <li><a href="#settings" class="hover:text-white transition-colors">系统设置</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-semibold text-lg mb-4">文档</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition-colors">用户手册</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">API文档</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">开发指南</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">技术支持</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-semibold text-lg mb-4">联系我们</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-2"></i>
                            <span>北京市海淀区中关村南大街5号</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-2"></i>
                            <span>+86 10 8888 8888</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-2"></i>
                            <span>contact@uavswarm.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm">
                <p>© 2025 无人集群管控平台. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 移动菜单切换
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.getElementById('main-header');
            if (window.scrollY > 10) {
                header.classList.add('shadow-md');
                header.classList.add('bg-white/95');
                header.classList.add('backdrop-blur-sm');
            } else {
                header.classList.remove('shadow-md');
                header.classList.remove('bg-white/95');
                header.classList.remove('backdrop-blur-sm');
            }
        });
        
        // 高度滑块
        const altitudeSlider = document.getElementById('altitude-slider');
        const altitudeValue = document.getElementById('altitude-value');
        altitudeSlider.addEventListener('input', function() {
            altitudeValue.textContent = `${this.value}米`;
        });
        
        // 速度滑块
        const speedSlider = document.getElementById('speed-slider');
        const speedValue = document.getElementById('speed-value');
        speedSlider.addEventListener('input', function() {
            speedValue.textContent = `${this.value} km/h`;
        });
        
        // 无人机数量滑块
        const uavCountSlider = document.getElementById('uav-count-slider');
        const uavCountValue = document.getElementById('uav-count-value');
        uavCountSlider.addEventListener('input', function() {
            uavCountValue.textContent = `${this.value}架`;
        });
        
        // 虚拟摇杆功能
        const joystick = document.getElementById('joystick');
        let isDragging = false;
        const joystickContainer = joystick.parentElement;
        const containerRect = joystickContainer.getBoundingClientRect();
        const centerX = containerRect.width / 2;
        const centerY = containerRect.height / 2;
        const maxRadius = containerRect.width / 2 - joystick.offsetWidth / 2;
        
        joystick.addEventListener('mousedown', function(e) {
            isDragging = true;
        });
        
        document.addEventListener('mousemove', function(e) {
            if (!isDragging) return;
            
            const containerRect = joystickContainer.getBoundingClientRect();
            const centerX = containerRect.width / 2;
            const centerY = containerRect.height / 2;
            
            let x = e.clientX - containerRect.left - joystick.offsetWidth / 2;
            let y = e.clientY - containerRect.top - joystick.offsetHeight / 2;
            
            // 限制在圆内
            const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
            if (distance > maxRadius) {
                const angle = Math.atan2(y - centerY, x - centerX);
                x = centerX + Math.cos(angle) * maxRadius;
                y = centerY + Math.sin(angle) * maxRadius;
            }
            
            joystick.style.left = `${x}px`;
            joystick.style.top = `${y}px`;
            
            // 这里可以添加发送控制指令的代码
            const directionX = (x - centerX) / maxRadius;
            const directionY = (y - centerY) / maxRadius;
            console.log(`方向: x=${directionX.toFixed(2)}, y=${directionY.toFixed(2)}`);
        });
        
        document.addEventListener('mouseup', function() {
            if (isDragging) {
                isDragging = false;
                // 回到中心位置
                joystick.style.left = `${centerX - joystick.offsetWidth / 2}px`;
                joystick.style.top = `${centerY - joystick.offsetHeight / 2}px`;
            }
        });
        
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 集群状态分析图表
            const statusCtx = document.getElementById('status-chart').getContext('2d');
            new Chart(statusCtx, {
                type: 'doughnut',
                data: {
                    labels: ['执行中', '待机中', '低电量', '故障', '离线'],
                    datasets: [{
                        data: [14, 6, 2, 1, 1],
                        data: [14, 6, 2, 1, 1],
                        backgroundColor: [
                            '#00B42A',
                            '#FF7D00',
                            '#F53F3F',
                            '#722ED1',
                            '#86909C'
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                usePointStyle: true,
                                pointStyle: 'circle'
                            }
                        }
                    },
                    cutout: '70%'
                }
            });
            
            // 仿真结果分析图表
            const simulationCtx = document.getElementById('simulation-chart').getContext('2d');
            new Chart(simulationCtx, {
                type: 'line',
                data: {
                    labels: ['0s', '30s', '1m', '1m30s', '2m', '2m30s', '3m', '3m30s', '4m', '4m30s', '5m'],
                    datasets: [{
                        label: '通信质量 (%)',
                        data: [95, 92, 88, 85, 87, 84, 82, 85, 88, 90, 92],
                        borderColor: '#165DFF',
                        backgroundColor: 'rgba(22, 93, 255, 0.1)',
                        fill: true,
                        tension: 0.4
                    }, {
                        label: '任务完成率 (%)',
                        data: [0, 15, 30, 40, 50, 60, 68, 75, 82, 88, 92],
                        borderColor: '#0FC6C2',
                        backgroundColor: 'rgba(15, 198, 194, 0.1)',
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                callback: function(value) {
                                    return value + '%';
                                }
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
            
            // 历史任务分析图表
            const tasksCtx = document.getElementById('tasks-chart').getContext('2d');
            new Chart(tasksCtx, {
                type: 'bar',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [{
                        label: '完成任务数',
                        data: [12, 19, 15, 17, 22, 14, 9],
                        backgroundColor: '#165DFF',
                        borderRadius: 6
                    }, {
                        label: '未完成任务数',
                        data: [2, 1, 3, 0, 2, 3, 1],
                        backgroundColor: '#F53F3F',
                        borderRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
            
            // 无人机性能分析图表
            const performanceCtx = document.getElementById('performance-chart').getContext('2d');
            new Chart(performanceCtx, {
                type: 'radar',
                data: {
                    labels: ['续航能力', '抗风能力', '负载能力', '通信距离', '操作简便性', '稳定性'],
                    datasets: [{
                        label: '幻影2000',
                        data: [85, 75, 65, 80, 90, 85],
                        backgroundColor: 'rgba(22, 93, 255, 0.2)',
                        borderColor: '#165DFF',
                        pointBackgroundColor: '#165DFF',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: '#165DFF'
                    }, {
                        label: '捕食者-X',
                        data: [70, 85, 80, 75, 75, 80],
                        backgroundColor: 'rgba(255, 125, 0, 0.2)',
                        borderColor: '#FF7D00',
                        pointBackgroundColor: '#FF7D00',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: '#FF7D00'
                    }, {
                        label: '猎鹰-9',
                        data: [90, 80, 85, 95, 70, 85],
                        backgroundColor: 'rgba(15, 198, 194, 0.2)',
                        borderColor: '#0FC6C2',
                        pointBackgroundColor: '#0FC6C2',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: '#0FC6C2'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        r: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                stepSize: 20
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
            
            // 通信质量分析图表
            const communicationCtx = document.getElementById('communication-chart').getContext('2d');
            new Chart(communicationCtx, {
                type: 'line',
                data: {
                    labels: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
                    datasets: [{
                        label: '信号强度 (dBm)',
                        data: [-75, -78, -80, -82, -79, -85, -83, -80, -77, -79, -81],
                        borderColor: '#165DFF',
                        backgroundColor: 'rgba(22, 93, 255, 0.1)',
                        fill: true,
                        tension: 0.4
                    }, {
                        label: '延迟 (ms)',
                        data: [45, 50, 55, 60, 52, 65, 62, 58, 50, 48, 52],
                        borderColor: '#FF7D00',
                        backgroundColor: 'transparent',
                        borderDash: [5, 5],
                        tension: 0.4,
                        yAxisID: 'y1'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                            title: {
                                display: true,
                                text: '信号强度 (dBm)'
                            },
                            ticks: {
                                callback: function(value) {
                                    return value + ' dBm';
                                }
                            }
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            title: {
                                display: true,
                                text: '延迟 (ms)'
                            },
                            grid: {
                                drawOnChartArea: false
                            },
                            ticks: {
                                callback: function(value) {
                                    return value + ' ms';
                                }
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        });
        
        // 模拟添加新的仿真日志
        function addSimulationLog(message, type = 'primary') {
            const now = new Date();
            const timeString = now.toTimeString().split(' ')[0];
            const logElement = document.getElementById('simulation-log');
            const logEntry = document.createElement('p');
            logEntry.innerHTML = `<span class="text-${type}">${timeString}</span> - ${message}`;
            logElement.appendChild(logEntry);
            logElement.scrollTop = logElement.scrollHeight;
        }
        
        // 模拟每隔一段时间添加新日志
        setInterval(() => {
            const messages = [
                { text: '所有无人机状态正常', type: 'success' },
                { text: '编队保持良好', type: 'primary' },
                { text: '数据传输稳定', type: 'primary' },
                { text: '环境扫描完成', type: 'success' },
                { text: '发现目标，开始跟踪', type: 'warning' }
            ];
            const randomMessage = messages[Math.floor(Math.random() * messages.length)];
            addSimulationLog(randomMessage.text, randomMessage.type);
        }, 5000);
    </script>
</body>
</html>
    